<!--使用记录-->
<template>
  <div class="ele-body">
    <el-card>
      <div class="flex-align-center keyword-top">
        <div class="keyword-title">使用记录</div>
      </div>
      <!-- 数据表格 -->
      <ele-pro-table
        :toolbar="false"
        ref="table"
        :columns="columns"
        :datasource="datasource"
      >
        <template v-slot:status="{ row }">
          <!--status  1.支出2.充值3.续费-->
          <div>{{row.status==1 ? '支出' : row.status==2 ? '充值' : '续费' }}</div>
        </template>
        <template v-slot:shopCode="{ row }">
          <div>{{row.shopCode ||  '--' }}</div>
        </template>

      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import {pointRecharge,pointRechargePage} from '@/api/recordList'
  export default {
    name: "index",
    data() {
      return {
        // 表格列配置
        columns: [
          {
            prop: 'status',
            label: '使用类型',
            sortable: 'custom',
            showOverflowTooltip: true,
            slot: 'status',
            // align:'center'
          },
          {
            prop: 'shopCode',
            label: '活动任务',
            sortable: 'custom',
            showOverflowTooltip: true,
            slot: 'shopCode',
          },
          {
            prop: 'money',
            label: '使用点数',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'createTime',
            label: '使用时间',
            sortable: 'custom',
            showOverflowTooltip: true,
          }
        ],
         /*
         datasource:[
         {
          merchantName:'商家名称',
          money:10,
          createTime:'2023-06-16 00:00:00'
        },
          {
            merchantName:'ds',
            money:5,
            createTime:'2023-06-16 10:54:00'
          },{
            merchantName:'summary',
            money:10,
            createTime:'2023-06-16 10:00:00'
          }
          ]*/
      };
    },
    // 路由刷新
    activated(){
      this.reload()
    },
    created(){
      // this.init()
    },
    methods: {
      init(){
        console.log('使用记录init========================')
        // pointRecharge(this.$store.state.user.info.merchantId,2)
        pointRechargePage({
          limit:10,
          page:1,
          id: this.$store.state.user.info.merchantId,
          types: 2
        })
          .then((data) => {
            this.datasource=data.data
            console.log('data.data', data.data)
            // this.$message.success(data.msg);
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return pointRechargePage({ ...where, ...order, page, limit,
          id: this.$store.state.user.info.merchantId,
          types: 2
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      }
    }
  }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }
  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
